<template>
  <div>
    <div>
      <h1 style="color: #0a0a80">{{ title }}</h1>
    </div>
    <span>
      <div id="container"></div>
    </span>
    <div style="width: 500px">
      <el-tag>第三学期完成率：</el-tag
      ><el-progress
        :text-inside="true"
        :stroke-width="30"
        :percentage="this.p3"
        status="success"
      ></el-progress>
      <el-tag>第四学期完成率：</el-tag
      ><el-progress
        :text-inside="true"
        :stroke-width="30"
        :percentage="this.p4"
        status="success"
      ></el-progress>
      <el-tag type="">增长率</el-tag>
        <template v-if="this.flag === 1">
          <el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.increase"
            status="success"
          ></el-progress>
        </template>
        <template v-if="this.flag === 0">
          <el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.increase"
            status="exception"
          ></el-progress>
        </template>
    </div>
  </div>
</template>

<script>
import { DualAxes } from "@antv/g2plot";

export default {
  data() {
    return {
      p1: "",
      p2: "",
      p3: "",
      p4: "",
      add1: "",
      add2: "",
      increase: "",
      flag: "",
      user: JSON.parse(window.sessionStorage.getItem("user")),
      title: "大二整学年学生跑步数据详情",
    };
  },
  name: "studentBar",
  mounted() {
    this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
      let p1 = 0,
          p2 = 0,
          p3 = 0,
          p4 = 0,
          add1 = 0,
          add2 = 0,
          increase = 0;
      for (var i = 0; i < resp.length; i++) {
        if (resp[i].mileageTerm1 >= 50) p1++;
        if (resp[i].mileageTerm2 >= 50) p2++;
        if (resp[i].mileageTerm3 >= 50) p3++;
        if (resp[i].mileageTerm4 >= 50) p4++;
         add1 += resp[i].mileageTerm3;
          add2 += resp[i].mileageTerm4;
      }
      this.p1 = ((p1 / resp.length).toFixed(4) * 100).toFixed(2);
      this.p2 = ((p2 / resp.length).toFixed(4) * 100).toFixed(2);
      this.p3 = ((p3 / resp.length).toFixed(4) * 100).toFixed(2);
      this.p4 = ((p4 / resp.length).toFixed(4) * 100).toFixed(2);
      this.increase = (add2 - add1) / add1;
        if (this.increase > 0) {
          this.flag = 1;
        } else {
          this.flag = 0;
        }
      const dualAxes = new DualAxes("container", {
        data: [resp, resp],
        xField: "name",
        yField: ["mileageTerm3", "mileageTerm4"],
        geometryOptions: [
          {
            geometry: "column",
          },
          {
            geometry: "line",
            lineStyle: {
              lineWidth: 2,
            },
          },
        ],
      });

      dualAxes.render();
    });
  },
};
</script>

<style scoped></style>
